<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="style/vue_event.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue_app">
	<h1>event</h1>
	<button v-on:click="age++">+一点</button>
	<button @click="age--">-一点</button>
	<button v-on:click="subtract(10)">小一点</button>
	<p> my age is {{ age }} </p>
	<input ref="logname" type="text" v-on:keyup="logName()"/>
	<!-- 数据双向绑定  name是是js里面data的定义的name -->
	<input ref="logname" type="text" v-model="name"/> <!-- v-model="name"中的name是vue中data中的name  -->
	<span>{{name}}</span>
	<input ref="logage" type="text" v-on:keyup="logAge()"/>
	<span>{{age}}</span>
	
	<div id="canvas" v-on:mousemove="updateXY">
		{{ x }}, {{ Y }}
		<span v-on:mousemove= "stopmoving"> Stop Moving </span>
		<span v-on:mousemove.stop=""> Stop Moving </span> <!-- 阻止事件冒泡  详情看vue的事件修饰符 -->
	</div>
	<a v-on:click.prevent="alert()" href="http://www.baidu.com"></a>  <!-- 实现执行alert()方法后不跳转href -->
	<!-- 键盘事件  键值修饰符 -->
</div>

<script src="vue_js/vue_event.js"></script>
</body>
</html>